<template lang='pug'>
  .card
    .background-img.bg-img-ratio(
      @click="$emit('click')"
      :style='{backgroundImage: `url(${url || ""})`}'
      )
    .card-info
      .card-info-title
        .name {{title}}
        .amount ¥{{price}}
      .desc {{desc}}
    .card-footer
      .sell-count 已售出{{sellCount || 0}}件
      .sell-footer-right: slot
      
</template>

<script type='text/ecmascript-6'>
  export default {
    props: {
      url: String,
      title: String,
      desc: String,
      price: Number,
      sellCount: Number,
    },
    data() {
      return {

      }
    },
    mounted() {
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped> 

@import '~assets/stylus/variable.styl'
 
.card
  margin 1rem 1rem 0
  padding 1rem 1rem 0
  background-color #fff
  border-radius 5px
.card-info
  padding-top 0.5rem
  line-height 1.5
  &-title
    display flex
    align-items flex-end
    .name
      flex 1
      padding-right 0.5rem
  .desc
    color $color-black-l
.card-footer
  padding 2rem 0
  display flex
  align-items center
  .sell-count
    color $color-black-l
    font-size $fsz-small
  .sell-footer-right
    flex 1
    text-align right
</style>
